<!DOCTYPE html>
<<<<<<< HEAD
<html>
<head>
    <title>vue生命周期</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>

<div id="app123">
    <p>{{ message }}</p>
</div>

<script type="text/javascript">

    var app = new Vue({
        el: '#app123',
        data: {
            message : "xuxiao is boy"
        },
        beforeCreate: function () {
            console.group('beforeCreate 创建前状态===============》');
            console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
            console.log("%c%s", "color:red","data   : " + this.$data); //undefined
            console.log("%c%s", "color:red","message: " + this.message)
        },
        created: function () {
            console.group('created 创建完毕状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //undefined
            console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        beforeMount: function () {
            console.group('beforeMount 挂载前状态===============》');
            console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        mounted: function () {
            console.group('mounted 挂载结束状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message);
        },
        updated: function () {
            console.group('updated 更新完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message);
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message);
        },
        destroyed: function () {
            console.group('destroyed 销毁完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message)
        }
    })
</script>
</body>
=======
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title id="tit">{{msg}}</title>
    <script type="text/javascript" src="../k1/vue.min.js"></script>
</head>
<body>
    <div id="ask"><!--vue不能控制body和html的标签-->
        <!--鼠标左键-->
        <div :style="left_style" @click.left="mouseclick('左')">左</div>
        <!--鼠标中键-->
        <div :style="middle_style" @click.middle="mouseclick('中')">中</div>
        <!--鼠标右键-->
        <!--加prevent为了屏蔽浏览器自带右键-->
<!--        <div :style="right_style" @contextmenu.prevent="mouseclick('右')">右</div>-->
        <div :style="right_style" @click.right="mouseclick('右')">右</div>

    </div>

</body>
<script type="module" src="js1.js"></script>
<script type="module">
    import {fn} from "./js1.js"   //要写.js
    fn();
</script>

<script>
    // import {fn} from "./js1.js"  //不能在这里写
    // fn();
    var vue = function (options){new Vue(options)};
    vue({
        el:'#tit',
        data:{
            msg:'Vue 监听鼠标左键 鼠标右键以及鼠标中键修饰符click.left&contextmenu&click.middle'
        }
    });
    var app = vue({
        el:'#ask',
        data:{
            left_style:{border:'solid 2px red',height:'200px'},
            right_style:{border:'solid 2px blue',height:'200px'},
            middle_style:{border:'solid 2px yellow',height:'200px'},
        },
        methods:{
            mouseclick(where){
                alert('点击鼠标'+where+'键触发');
            }
        }
    });

</script>


>>>>>>> origin/master
</html>
